<template>
  <div class="customer-log">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>客户操作日志</span>
          <el-button @click="goBack">
返回
</el-button>
        </div>
      </template>

      <div v-loading="loading">
        <div v-if="logs.length === 0"
class="no-data">
          <el-empty description="暂无操作日志" />
        </div>
        <div v-else>
          <el-table :data="logs"
border>
            <el-table-column prop="id"
label="ID" width="80" />
            <el-table-column prop="content"
label="操作内容" min-width="200" />
            <el-table-column prop="creator_name"
label="操作人" width="120" />
            <el-table-column prop="ip"
label="IP地址" width="150" />
            <el-table-column prop="create_time"
label="操作时间" width="180">
              <template #default="scope">
                {{ formatDateTime(scope.row.create_time) }}
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination-container">
            <el-pagination
              v-model:current-page="queryForm.page"
              v-model:page-size="queryForm.limit"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  // 从外部文件导入所有逻辑
  import {
    // 响应式数据
    loading,
    queryForm,
    logs,
    total,

    // 方法
    goBack,
    handleSizeChange,
    handleCurrentChange,
    formatDateTime,
  } from './CustomerLogScript'
</script>

<style scoped src="./CustomerLogStyle.scss"></style>
